<ui:composition template="template.xhtml"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:richext="http://code.google.com/p/richfaces-ext"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:a4j="http://richfaces.org/a4j"
		xmlns:rich="http://richfaces.org/rich">
    <ui:define name="header">
  		<script type="text/javascript">
			function refresh() {
				document.getElementById('#{rich:clientId('btn_refresh')}').click();
			} 
		</script>
    </ui:define>
    <ui:define name="body">
	    <f:view>
		    <h:form id="form1">      
				<h3><span>rating</span> 5 Stars rating component</h3>
				<a4j:jsFunction name="updateRating" reRender="ratingVal" />
				<richext:rating value="#{ratingController.ratingVal}" onSuccessJSCall="refresh();" />
				<br/>
				<a4j:commandButton id="btn_refresh" reRender="ratingVal" style="visibility:hidden" />				
				<br/>
				You rated: <h:outputText id="ratingVal" value="#{ratingController.ratingVal}" />
				<br/>
				<br/>
			</h:form>
		</f:view>	
       	<p class="more"><a href="#{request.requestURI}.source">SOURCE</a></p>
    </ui:define>
</ui:composition>